<template>
  <div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 20px"
    >
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>指定核酬条件</el-breadcrumb-item>
      <el-breadcrumb-item>第一步</el-breadcrumb-item>
      <el-breadcrumb-item>第二步</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="head">
      <h3>第二步：指定核酬条件</h3>
    </div>
    <div id="choose">
      <ul>
        <li>
          <el-card style="margin: 20px 0 40px 0">
            <h3 class="middle" id="title">选择判断条件</h3>
            <span>用户属性：</span>
            <el-button type="primary" @click="showYewupinpai" style="color: red"
              >业务品牌</el-button
            >
            <el-button type="primary" @click="change($event, '开户时间')"
              >开户时间</el-button
            >
            <el-button type="primary" @click="change($event, '用户状态')"
              >用户状态</el-button
            >
            <el-button type="primary" @click="change($event, '入网卡通')"
              >入网卡通</el-button
            >
            <el-button type="primary" @click="change($event, '是否开通显示')"
              >是否开通显示</el-button
            >
            <el-button type="primary" @click="change($event, '资费套餐')"
              >资费套餐</el-button
            >
            <el-button type="primary" @click="change($event, '首核标识')"
              >首核标识</el-button
            >
            <el-button type="primary" @click="change($event, '入网方案')"
              >入网方案</el-button
            >
            <el-button type="primary" @click="change($event, '回流办理月数')"
              >回流办理月数</el-button
            >
            <el-button type="primary" @click="change($event, '主资费套餐')"
              >主资费套餐</el-button
            >
            <el-button
              type="primary"
              @click="change($event, '合家欢主副卡标识')"
              >合家欢主副卡标识</el-button
            >
            <el-button type="primary" @click="change($event, '连续在网月数')"
              >连续在网月数</el-button
            >
          </el-card>
        </li>
        <li>
          <el-card style="margin: 20px 0 40px 0">
            <span>用户账务属性：</span>
            <el-button type="primary" @click="change($event, '非免费通话次数')"
              >非免费通话次数</el-button
            >
            <el-button type="primary" @click="change($event, '用户sp费用')"
              >用户sp费用</el-button
            >
            <el-button type="primary" @click="change($event, '出账总收入')"
              >出账总收入</el-button
            >
            <el-button type="primary" @click="change($event, '入网预存款')"
              >入网预存款</el-button
            >
            <el-button type="primary" @click="change($event, 'sp费用占比')"
              >sp费用占比</el-button
            >
          </el-card>
        </li>
      </ul>
      <ul>
        <el-card>
          <li>
            <p class="middle">条件描述</p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span style="color: red">业务品牌：</span> {{ brandCode }}--{{
              brandName
            }}
            <div v-for="(item, index) in showArr" :key="index" class="descript">
              {{ index + 1 }} &nbsp;&nbsp;&nbsp;&nbsp;
              {{ item }}
              <el-select v-model="dataArr[index].msg" style="margin: 0px 20px">
                <el-option value="0" label="等于"></el-option>
                <el-option value="1" label="大于"></el-option>
                <el-option value="2" label="小于"></el-option>
              </el-select>
              <el-input
                style="width: 15vw"
                v-model.number="dataArr[index].num"
              ></el-input>
            </div>
          </li>
        </el-card>
      </ul>
      <div class="middle">
        <el-button type="primary" @click="preview"> 上一步</el-button>
        <el-button type="primary" @click="save"> 下一步</el-button>
      </div>
    </div>
    <div id="modal">
      <el-dialog
        title="确认信息"
        :visible.sync="modelShow"
        width="50%"
        style="heigth: 500px"
      >
        <ul>
          <span>编码：</span>
          <el-input style="width: 12vw; margin-right: 20px" v-model="brandCode">
          </el-input>
          <span>名称：</span>
          <el-input style="width: 12vw; margin-right: 20px" v-model="brandName">
          </el-input>
          <el-button @click="search">查询</el-button>
          <el-button @click="clear">清除</el-button>
          <li v-for="item in brandArr" :key="item.id">
            <el-card style="margin: 20px 0px">
              <a
                href=""
                @click.prevent="getId(item.id, item.brandCode, item.brandName)"
                >{{ item.id }}. {{ item.brandCode }} --{{ item.brandName }}</a
              >
            </el-card>
          </li>
        </ul>
        <span slot="footer" class="dialog-footer">
          <el-button @click="modelShow = false">关闭</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "channelStep2",
  data() {
    return {
      showArr: [],
      value: "",
      number: "",
      match: /^[0-9]*$/,
      msg: "",
      dataArr: [],
      chuzhangzongshouru: { limitId: 4, bijiaofu: "", value: "" },
      yewupinpai: { limitId: 5},
      ruwangyucunkuan: { limitId: 6, bijiaofu: "", value: "" },
      zifeitaocan: { limitId: 1, bijiaofu: "", value: "" },
      modelShow: false,
      brandArr: [],
      brandName: "",
      brandCode: "",
      symbol: "",
      brandId: "",
      brandCode: "",
      brandName: "",
    };
  },
  methods: {
    change(e, show) {
      if (this.showArr.indexOf(show) == -1) {
        e.currentTarget.style.backgroundColor = "#67C23A";
        this.showArr.push(show);
        this.dataArr.push({ val: show, msg: "", num: "" });
      } else {
        e.currentTarget.style.backgroundColor = "#409EFF";
        this.showArr.splice(this.showArr.indexOf(show), 1);
      }
    },
    save() {
      if (this.brandId == "") {
        this.$alert("请输入业务品牌");
        return;
      }
      
      if(this.$route.query.symbol){
        this.symbol = this.$route.query.symbol
        console.log('是query');
      }
      if(this.$route.params.symbol){
         this.symbol = this.$route.params.symbol
         console.log('是params');
      }
      if(this.dataArr.length!=0){
        console.log('循环开始了');
         for (let i = 0; i < this.dataArr.length; i++) {

        if (this.dataArr[i].val.indexOf("出账总收入") != -1) {       
          if(this.dataArr[i].msg==''){
            this.$alert('请输入正确的比较符')
            return
          }
           if(this.dataArr[i].num==''){
            this.$alert('请输入正确的数字')
            return
          }
             this.chuzhangzongshouru.bijiaofu = this.dataArr[i].msg;
          this.chuzhangzongshouru.value = this.dataArr[i].num;
        }
        
        if (this.dataArr[i].val.indexOf("资费套餐") != -1) {
          this.zifeitaocan.bijiaofu = this.dataArr[i].msg;
          this.zifeitaocan.value = this.dataArr[i].num;
          console.log(this.zifeitaocan.value,this.zifeitaocan.bijiaofu);
        }
        if (this.dataArr[i].val.indexOf("入网预存款") != -1) {
          this.ruwangyucunkuan.bijiaofu = this.dataArr[i].msg;
          this.ruwangyucunkuan.value = this.dataArr[i].num;
        }
      }
      } 
      this.chuzhangzongshouru.policyInfoId = this.symbol;
      this.zifeitaocan.policyInfoId = this.symbol;
      this.ruwangyucunkuan.policyInfoId = this.symbol;
      this.chuzhangzongshouru.brandId = this.brandId;
      this.zifeitaocan.brandId = this.brandId;
      this.ruwangyucunkuan.brandId = this.brandId;
      this.yewupinpai.brandId=this.brandId;
     this.yewupinpai.policyInfoId=this.symbol;
     console.log(this.chuzhangzongshouru);
      if (this.chuzhangzongshouru.biaojifu == "" || this.chuzhangzongshouru.value == ""&&
      this.ruwangyucunkuan.biaojifu == "" || this.ruwangyucunkuan.value == ""&&
      this.zifeitaocan.biaojifu == "" || this.zifeitaocan.value == ""
      ) {
           console.log(this.yewupinpai);
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
     else if(this.chuzhangzongshouru.biaojifu == "" || this.chuzhangzongshouru.value == ""&&
      this.ruwangyucunkuan.biaojifu == "" || this.ruwangyucunkuan.value == "") {
           console.log(this.zifeitaocan);
           console.log(this.yewupinpai);
        // if (this.match.test(this.zifeitaocan.num) != true) {
        //   this.$alert("请输入正确的数字！");
        //   return;
        // }
        // if (this.zifeitaocan.msg == "") {
        //   this.$alert("请输入正确的公式！");
        //   return;
        // }
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.zifeitaocan
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
     else  if(this.chuzhangzongshouru.biaojifu == "" || this.chuzhangzongshouru.value == ""&&
      this.zifeitaocan.biaojifu == "" || this.ruwangyucunkuan.value == "") {
           console.log(this.ruwangyucunkuan);
           console.log(this.yewupinpai);
        // if (this.match.test(this.zifeitaocan.num) != true) {
        //   this.$alert("请输入正确的数字！");
        //   return;
        // }
        // if (this.zifeitaocan.msg == "") {
        //   this.$alert("请输入正确的公式！");
        //   return;
        // }
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.ruwangyucunkuan
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
       else if(this.ruwangyucunkuan.biaojifu == "" || this.ruwangyucunkuan.value == ""&&
      this.zifeitaocan.biaojifu == "" || this.ruwangyucunkuan.value == "") {
           console.log(this.chuzhangzongshouru);
           console.log(this.yewupinpai);
        // if (this.match.test(this.zifeitaocan.num) != true) {
        //   this.$alert("请输入正确的数字！");
        //   return;
        // }
        // if (this.zifeitaocan.msg == "") {
        //   this.$alert("请输入正确的公式！");
        //   return;
        // }
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.chuzhangzongshouru
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
      else  if(this.ruwangyucunkuan.biaojifu == "" || this.ruwangyucunkuan.value == "") {
           console.log(this.chuzhangzongshouru);
           console.log(this.yewupinpai);
           console.log(this.zifeitaocan);
        // if (this.match.test(this.zifeitaocan.num) != true) {
        //   this.$alert("请输入正确的数字！");
        //   return;
        // }
        // if (this.zifeitaocan.msg == "") {
        //   this.$alert("请输入正确的公式！");
        //   return;
        // }
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.chuzhangzongshouru,
                this.zifeitaocan
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
      else if(this.zifeitaocan.biaojifu == "" || this.zifeitaocan.value == "") {
           console.log(this.chuzhangzongshouru);
           console.log(this.yewupinpai);
           console.log(this.zifeitaocan);
        // if (this.match.test(this.zifeitaocan.num) != true) {
        //   this.$alert("请输入正确的数字！");
        //   return;
        // }
        // if (this.zifeitaocan.msg == "") {
        //   this.$alert("请输入正确的公式！");
        //   return;
        // }
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.chuzhangzongshouru,
                this.ruwangyucunkuan
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
      else if(this.chuzhangzongshouru.biaojifu == "" || this.chuzhangzongshouru.value == "") {
           console.log(this.chuzhangzongshouru);
           console.log(this.yewupinpai);
           console.log(this.zifeitaocan);
        // if (this.match.test(this.zifeitaocan.num) != true) {
        //   this.$alert("请输入正确的数字！");
        //   return;
        // }
        // if (this.zifeitaocan.msg == "") {
        //   this.$alert("请输入正确的公式！");
        //   return;
        // }
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.zifeitaocan,
                this.ruwangyucunkuan
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
     else  if (this.chuzhangzongshouru.biaojifu != "" && this.chuzhangzongshouru.value != ""&&
      this.ruwangyucunkuan.biaojifu != "" && this.ruwangyucunkuan.value != ""&&
      this.zifeitaocan.biaojifu != "" && this.zifeitaocan.value != ""
      ) {
           console.log(this.yewupinpai);
            this.$axios.post("api/policyLimit/insert", [
                this.yewupinpai,
                this.zifeitaocan,
                this.ruwangyucunkuan,
                this.chuzhangzongshouru
              ])
              .then((res) => {
                if (res.data.code < 300 && res.data.code >= 200) {
                  if (this.$route.params.step3) {
                    this.$router.push({
                      name: "channelStep3",
                      params: {
                        step3: this.$route.params.step3,
                        symbol:this.symbol
                      },
                    });
                  } else {
                    this.$router.push(`/channelStep3?symbol=${this.symbol}`);
                  }
                }
                console.log(res);
              })
              .catch((err) => {
                this.$alert(err);
              });
      }
    },
    showYewupinpai() {
      this.modelShow = true;
      this.$axios
        .post("/api/brand/selectAll")
        .then((res) => {
          console.log(res);
          this.brandArr = res.data.data;
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    search() {
      this.$axios
        .post(
          "/api/brand/selectAll",
          this.$qs.stringify({
            brandName: this.brandName,
            brandCode: this.brandCode,
          })
        )
        .then((res) => {
          console.log(res);
          this.brandArr = res.data.data;
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    clear() {
      (this.brandName = ""), (this.brandCode = "");
    },
    getId(id, code, name) {
      this.brandName = name;
      this.brandCode = code;
      this.brandId = id;
      this.modelShow = false;
    },
    preview() {
      this.$router.push("./channel");
    }
  },
  created() {
    if (this.$route.params.step2) {
      this.yewupinpai.bijiaofu = this.$route.params.step2[0].bijiaofu;
      this.brandId = this.$route.params.step2[0].brandId;
      this.zifeitaocan.value = this.$route.params.step2[0].value;
    }
  },
};
</script>

<style scoped>
* {
  margin: 5px 0px;
}
a {
  text-decoration: none;
  color: #409eff;
}
li {
  list-style-type: none;
}
.middle {
  text-align: center;
}
.descript {
  margin: 20px 0px;
}
#title {
  margin-bottom: 10px;
}
#head {
  width: 100%;
  height: 10vh;
  line-height: 10vh;
  text-align: center;
  background: linear-gradient(to top, #99c9f1, #7cc4ff, #99c9f1);
}
</style>